<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <link rel="stylesheet" href="./bootstrap.css">
  <style>
    body {
      padding: 0;
      margin: 10px;
    }

    .isConfirm {
      visibility: hidden;
    }
    button:only-child {
      margin-top: 20px;
      margin-bottom: -10px;
      /* display: block; */
    }
    .img{
      width: 20px;
      height: 20px;
      margin: 0 10px 0 10px;
    }
    h2{
      margin-top: -20px;
    }
  </style>
</head>

<body>
  <template id="two">
    <section>
        <div v-for="(item,key) in seleResArr" :class="{'isConfirm':isConfirm[key]}">
          <h5>请第{{key+1}}个队员选择：</h5>
          <label :for="'taskyes'+key">是否成功呢？</label>
          <input type="checkbox" :id="'taskyes'+key" name="task" v-model="seleResArr[key]" > 
          {{seleResArr[key]?'成功':'失败'}}
          <img src="./assets/成功.png" alt="" class="img" v-if="seleResArr[key]">
          <img src="./assets/失败.png" alt="" class="img" v-if="!seleResArr[key]">
          <button @click="confirm(key)" class="btn btn-primary">确定</button>
        </div>
        <div v-if="isAllConfirm">
          <div class="alert alert-danger">
            结果是：
            有{{result}}个内鬼！
          </div>
          <button class="btn btn-warning btn-block" @click="handleClickReset">重置</button>
        </div>
    </section>
  </template>

  <template id="three">
      <section>
          <div v-for="(item,key) in seleResArr" :class="{'isConfirm':isConfirm[key]}">
            <h5>请第{{key+1}}个队员选择：</h5>
            <label :for="'taskyes'+key">是否成功呢？</label>
            <input type="checkbox" :id="'taskyes'+key" name="task" v-model="seleResArr[key]" > 
            {{seleResArr[key]?'成功':'失败'}}
            <img src="./assets/成功.png" alt="" class="img" v-if="seleResArr[key]">
            <img src="./assets/失败.png" alt="" class="img" v-if="!seleResArr[key]">
            <button @click="confirm(key)" class="btn btn-primary">确定</button>
          </div>
          <div v-if="isAllConfirm">
            <div class="alert alert-danger">
              结果是：
              有{{result}}个内鬼！
            </div>
            <button class="btn btn-warning btn-block" @click="handleClickReset">重置</button>
          </div>
      </section>
  </template>

  <template id="four">
      <section>
          <div v-for="(item,key) in seleResArr" :class="{'isConfirm':isConfirm[key]}">
            <h5>请第{{key+1}}个队员选择：</h5>
            <label :for="'taskyes'+key">是否成功呢？</label>
            <input type="checkbox" :id="'taskyes'+key" name="task" v-model="seleResArr[key]" > 
            {{seleResArr[key]?'成功':'失败'}}
            <img src="./assets/成功.png" alt="" class="img" v-if="seleResArr[key]">
            <img src="./assets/失败.png" alt="" class="img" v-if="!seleResArr[key]">
            <button @click="confirm(key)" class="btn btn-primary">确定</button>
          </div>
          <div v-if="isAllConfirm">
            <div class="alert alert-danger">
              结果是：
              有{{result}}个内鬼！
            </div>
            <button class="btn btn-warning btn-block" @click="handleClickReset">重置</button>
          </div>
      </section>
  </template>

  <template id="five">
      <section>
          <div v-for="(item,key) in seleResArr" :class="{'isConfirm':isConfirm[key]}">
            <h5>请第{{key+1}}个队员选择：</h5>
            <label :for="'taskyes'+key">是否成功呢？</label>
            <input type="checkbox" :id="'taskyes'+key" name="task" v-model="seleResArr[key]" > 
            {{seleResArr[key]?'成功':'失败'}}
            <img src="./assets/成功.png" alt="" class="img" v-if="seleResArr[key]">
            <img src="./assets/失败.png" alt="" class="img" v-if="!seleResArr[key]">
            <button @click="confirm(key)" class="btn btn-primary">确定</button>
          </div>
          <div v-if="isAllConfirm">
            <div class="alert alert-danger">
              结果是：
              有{{result}}个内鬼！
            </div>
            <button class="btn btn-warning btn-block" @click="handleClickReset">重置</button>
          </div>
      </section>
  </template>


  <div id="d1" class="container jumbotron">
    <h2>
      阿瓦隆小工具1.0版
    </h2>
    <div>
      <router-link to="/two">2人组队</router-link>  &nbsp;
      <router-link to="/three">3人组队</router-link>  &nbsp;
      <router-link to="/four">4人组队</router-link>  &nbsp;
      <router-link to="/five">5人组队</router-link> &nbsp;
    </div>
    <hr>
    <div class="alert alert-info" role="alert">勾选后并点击确定提交自己的结果</div>
    <router-view></router-view>
  </div>
</body>
<script>
  let two = {
    name: "two",
    template: "#two",
    data(){
      return {
        seleResArr:[false,false],
        isConfirm: [false,false]
      }
    },
    computed:{
      isAllConfirm(){
         return  this.isConfirm.every(function(item,idx){
            return item==true;
          })
      },
      result(){
        let stor = 0
        this.seleResArr.forEach((item,idx)=>{
          if(!item){
            stor++
          }
        })
        return stor
      }

    },
    methods:{
      confirm(key){
        //  this.isConfirm.splice(key,1,true)
        Vue.set(this.isConfirm,key,true)
      },
      handleClickReset(){
        history.go(0)
      }
    }                    
  }

  let three = {
    name: "three",
    template: "#three",
    data(){
      return {
        seleResArr:[false,false,false],
        isConfirm: [false,false,false]
      }
    },
    computed:{
      isAllConfirm(){
         return  this.isConfirm.every(function(item,idx){
            return item==true;
          })
      },
      result(){
        let stor = 0
        this.seleResArr.forEach((item,idx)=>{
          if(!item){
            stor++
          }
        })
        return stor
      }

    },
    methods:{
      confirm(key){
        //  this.isConfirm.splice(key,1,true)
        Vue.set(this.isConfirm,key,true)
      },
      handleClickReset(){
        history.go(0)
      }
    } 
  }

  let four = {
    name: "four",
    template: "#four",
    data(){
      return {
        seleResArr:[false,false,false,false],
        isConfirm: [false,false,false,false]
      }
    },
    computed:{
      isAllConfirm(){
         return  this.isConfirm.every(function(item,idx){
            return item==true;
          })
      },
      result(){
        let stor = 0
        this.seleResArr.forEach((item,idx)=>{
          if(!item){
            stor++
          }
        })
        return stor
      }

    },
    methods:{
      confirm(key){
        //  this.isConfirm.splice(key,1,true)
        Vue.set(this.isConfirm,key,true)
      },
      handleClickReset(){
        history.go(0)
      }
    } 
  }

  let five = {
    name: "five",
    template: "#five",
    data(){
      return {
        seleResArr:[false,false,false,false,false],
        isConfirm: [false,false,false,false,false]
      }
    },
    computed:{
      isAllConfirm(){
         return  this.isConfirm.every(function(item,idx){
            return item==true;
          })
      },
      result(){
        let stor = 0
        this.seleResArr.forEach((item,idx)=>{
          if(!item){
            stor++
          }
        })
        return stor
      }

    },
    methods:{
      confirm(key){
        Vue.set(this.isConfirm,key,true)
      },
      handleClickReset(){
        history.go(0)
      }
    } 
  }

  const routes = [
    { path: '/two', component: two },
    { path: '/three', component: three },
    { path: '/four', component: four },
    { path: '/five', component: five }
  ]

  const router = new VueRouter({
    routes
  })

  let vue = new Vue({
    el: "#d1",
    // data: {
    // },
    components: {
    },
    router
  })


</script>

</html>